<!DOCTYPE html>
<html>
<head>
  <title>Image Gallery</title>
  <style>
  	#imageGallery{
    	height:350px;
    	margin-left: 30%;
    }
    .image {
      width: 200px;
      height: 200px;
      margin: 10px;
      border: 1px solid #ccc;
      display: inline-block;
    }
  </style>
</head>
<body>
  	<div id="imageGallery"></div>
  	<div style="display:none">
  	<#list rows as row>
  		<div id="photos">${row.photos}</div>
  	</#list>
  	</div>
	<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.js"></script>
	<script>
    $(function () {
    	  console.log("token:",parent.getAppToken().token);
		  var images = $("#photos").text().split(",").map(function(fruit) {
			  return "https://gps.zhengjixny.com/unsafe/600x/zhengji/" + fruit;
		  });
			
		  var orgImages = $("#photos").text().split(",").map(function(fruit) {
			  return "https://minio-api.zhengjixny.com/zhengji/" + fruit;
		  });
		
		  var imageGallery = $('#imageGallery');
		
		  // 循环遍历图片数组并创建<img>元素
		  for (var i = 0; i < images.length; i++) {
		    var img = $('<img />').attr('src', images[i]).attr('index',i).addClass('image');
		    imageGallery.append(img);
		  }
		  
		  $('.image').click(function() {
		    //var src = $(this).attr('src');
		    var src = orgImages[$(this).attr('index')];
		   	console.log($(this).attr('index'),src);
		    window.open(src);
		  });
    });
</script>
</body>
</html>